<template>
  <el-row>
    <el-col>
      <!--  筛选条件    -->
      <el-form :inline="true" size="small">
        <el-form-item label="服务名称">
          <el-input style="width: 215px" placeholder="服务名称"></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col>
      <!--  列表    -->
      <vxe-table
          border
          resizable
          height="500"
          :row-config="{isCurrent: true, isHover: true}"
          :data="approvalDataList">
        <vxe-column field="resourceId" title="服务编号"></vxe-column>
        <vxe-column field="resourceName" title="服务名称"></vxe-column>
        <vxe-column field="durationName" title="时长"></vxe-column>
<!--        <vxe-column field="duration" title="时长" :formatter="formatterDuration"></vxe-column>-->
        <vxe-column field="additInfo" title="附加信息"></vxe-column>
        <vxe-column field="additFile" title="附加文件">
          <template v-slot="{ row }">
            <el-button type="text" v-if="'0' !== row['additFile']"
                       @click="downloadAdditFile(row['additFile'])"
                       size="small">
              {{ row['additFileName'] }}
            </el-button>
          </template>
        </vxe-column>
        <vxe-column field="createdUser" title="申请人">
          <template v-slot="{ row }">
            {{ row['applyUserInfo']['realName'] }}
          </template>
        </vxe-column>
        <vxe-column field="createdOrg" title="申请单位">
          <template v-slot="{ row }">
            {{ row['applyUserInfo']['organizations'][0]['orgName'] }}
          </template>
        </vxe-column>
        <vxe-column field="createdTime" title="申请时间" width="150"></vxe-column>
<!--        <vxe-column field="mapProxyInfo" title="密钥状态" :formatter="formatterKeyStatus" width="80"></vxe-column>-->
<!--        <vxe-column field="applyStatus" title="审核状态" :formatter="formatterStatus" width="80"></vxe-column>-->
        <vxe-column field="applyStatusName" title="审核状态" width="80"></vxe-column>
        <vxe-column title="操作" width="200" show-overflow>
          <template v-slot="{ row }">
            <el-button type="text" @click="approveDetail(row['applicationRecordId'])">详情</el-button>
            <el-button type="text" @click="approveResult(row['applicationRecordId'],'3')"
                       :disabled="row['applyStatus'] !== 1">通过
            </el-button>
            <el-button type="text" @click="approveResult(row['applicationRecordId'],'2')"
                       :disabled="row['applyStatus'] !== 1">拒绝
            </el-button>
            <el-dropdown class="approval-more-menu"
                         @command="updatedService"
                         trigger="click"
                         v-if="row['applyStatus'] === '3'">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{'row':row,'type':'1'}"
                                  :disabled="row['mapProxyInfo']['keyStatus'] === '1'">启动
                </el-dropdown-item>
                <el-dropdown-item :command="{'row':row,'type':'2'}"
                                  :disabled="row['mapProxyInfo']['keyStatus'] !== '1'">停止
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </vxe-column>
      </vxe-table>
      <!--   分页   -->
      <vxe-pager
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          :total="page.total"
          @page-change="queryApplicationApprove"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Total']">
      </vxe-pager>
    </el-col>

    <!--  申请单详情  -->
    <apply-detail :is-show.sync="showApproveDetailForm"
                  :approve-detail="approveDetailData"
                  :durationDict="durationDict"
                  :applyStatusDict="applyStatusDict">
    </apply-detail>
  </el-row>
</template>

<script>
/**
 * {我的审批列表}
 *
 * @author: 宋康
 * @date: 2023/1/13
 */
import {
  resourceApplyPublic,
  queryApplicationApproveIPage,
  updateApproveResult,
  updatedServiceStatus,
} from '@/api/map-apply'
import ApplyDetail from "@/views/oneself-centre/personal-work/apply/ApplyDetail";

export default {
  name: "ApprovalList",
  mixins: [resourceApplyPublic],
  components: {ApplyDetail},
  data() {
    return {
      approvalDataList: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    /**
     * {获取用户审批}
     *
     * @author: 宋康
     * @date: 2023/1/13
     */
    queryApplicationApprove() {
      this._debounce(() => queryApplicationApproveIPage(this.page.currentPage, this.page.pageSize, {}).then(res => {
        if (res.status) {
          const data = res.data;
          this.page.total = data.total;
          this.approvalDataList = data.records;
        }
      }), 500)
    },
    /**
     * {审批结果}
     *
     * @author: 宋康
     * @date: 2023/1/13
     */
    approveResult(applicationRecordId, r) {
      this._debounce(() => updateApproveResult(applicationRecordId, r).then(res => {
        if (res.status) {
          this.$message.success('审核状态已修改');
          this.queryApplicationApprove();
        } else {
          this.$message.error(res.msg);
        }
      }), 500);
    },
    /**
     * {更改服务状态}
     *
     * @author: 宋康
     * @date: 2023/1/29
     */
    updatedService({row, type}) {
      this._debounce(() => updatedServiceStatus(row['applicationRecordId'], type).then(res => {
        if (res.status) {
          this.$message.success('服务KEY状态已修改');
          this.queryApplicationApprove();
        } else {
          this.$message.error(res.msg);
        }
      }), 500)
    },
  },
  mounted() {
    this.queryDict().then(() => {
      this.queryApplicationApprove();
    })
  }
}
</script>

<style lang="scss" scoped>
.approval-more-menu {
  ::v-deep(.el-dropdown-link) {
    cursor: pointer;
    color: #409EFF;
    margin-left: 10px;
  }

  ::v-deep(.el-icon-arrow-down) {
    font-size: 12px;
  }
}
</style>